//联系单签发新增
<template>
  <div class="box">
    <h1>联系单签发新增</h1>
    <el-form
      :model="addruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="110px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="required">
        <el-input v-model="addruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="施工组合同" prop="required">
        <el-select v-model="addruleForm.contract" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联项目">
        <el-input v-model="addruleForm.associatedItems"></el-input>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-col :span="11">
          <el-form-item prop="required">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addruleForm.paymentData"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="拟付款金额" prop="required">
        <el-input v-model="addruleForm.paymentMoney"></el-input>
      </el-form-item>
      <el-form-item label="收款账户">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" prop="id" label="序号" width="100px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="户名"
            width="100px"
          >
          </el-table-column>
          <el-table-column align="center" prop="bank" label="开户行">
          </el-table-column>
          <el-table-column align="center" prop="num" label="账号">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <!-- <template slot-scope="scope">
              <el-radio name="radioName" v-model="scope.row.a"></el-radio>
            </template> -->
            <input
              type="radio"
              v-model="addruleForm.collectionAccount"
              name="radioName"
              style="height: 18px; width: 18px"
            />
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item
        label="合同付款备注"
        style="text-align: left"
        prop="required"
      >
        <textarea
          v-model="addruleForm.remarks"
          name=""
          id=""
          cols="40"
          rows="8"
        ></textarea>
      </el-form-item>
      <el-form-item label="是否紧急" style="text-align: left">
        <el-switch
          v-model="addruleForm.stateEmergency"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="项目审批单" prop="required" style="text-align: left">
        <el-upload
          ref="projectCorrect"
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :http-request="projectCorrect"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            文件格式为Word. Excel. PDF. JPG. PNG. ZIP等, 大小不超过10M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="产值确认单" prop="required" style="text-align: left">
        <el-upload
          ref="valueConfirm"
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :http-request="valueConfirm"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            文件格式为Word. Excel. PDF. JPG. PNG. ZIP等, 大小不超过10M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-model="addruleForm.approver"
        label="审批人"
        prop="required"
        style="text-align: left"
      >
        <el-button type="primary">选择审批人</el-button>
      </el-form-item>
      <el-form-item
        v-model="addruleForm.ccpeople"
        label="抄送人"
        prop="required"
        style="text-align: left"
      >
        <el-button type="primary">选择抄送人</el-button>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="preservation">保存为草稿</el-button>
      <el-button type="primary">提交审核</el-button>
      <el-button @click="ret">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      state: false,
      radio: 1,
      a: "",
      addruleForm: {
        title: "",
        contract: "", //合同
        associatedItems: "", //关联项目
        paymentData: "", //拟付款日期
        paymentMoney: "", //付款金额
        collectionAccount: "", //收款账户
        remarks: "", //备注
        stateEmergency: "", //紧急
        projectCorrect: "", //项目审批
        outputValue: "", //产值确认
        approver: "", //审批人
        ccpeople: "", //抄送人
      },
      rules: {
        required: [{ required: true, message: "必填" }],
      },
      tableData: [
        {
          serial: 1,
          id: 1,
          bank: "招商银行上海分行",
          name: "张三",
          num: "5555554158262625485",
        },
        {
          serial: 2,
          id: 2,
          bank: "招商银行上海分行",
          name: "王五",
          num: "5555554158262625485",
        },
      ],
    };
  },
  computed: {},
  methods: {
    //返回
    ret() {
      this.$router.go(-1); //返回上一层
    },
    //文件上传成功
    handleAvatarSuccess() {
      this.open2("上传成功");
    },
    //文件上传失败
    beforeAvatarUpload() {
      this.open4("上传失败");
    },
    projectCorrect(content) {
      let formData = new FormData();
      formData.append("myfile", content.file);
      // console.log(content.file);
    },
    valueConfirm(content) {
      let formData = new FormData();
      formData.append("myfile", content.file);
      // console.log(content.file);
    },
    //保存为草稿
    preservation() {
      console.log(this.$refs.projectCorrect.uploadFiles);
      console.log(this.$refs.valueConfirm.uploadFiles);
      // this.$refs.projectCorrect.submit();
      // this.$refs.valueConfirm.submit();
    },
    //警告
    open4(str) {
      this.$message.error(str);
    },
    //成功
    open2(str) {
      this.$message({
        message: str,
        type: "success",
      });
    },
  },
  created() {},
};
</script>
<style scoped lang='less'>
.box {
  margin-left: 10%;
}
.el-form {
  padding: 20px;
  width: 80%;
  .el-form-item {
    .el-col {
      width: 40%;
    }
    .el-input,
    .el-select {
      width: 40%;
    }
  }
  .el-select {
    width: 100%;
  }
}
.el-table {
  font-size: 12px !important;
}
textarea {
  border: 1px solid #ccc;
  outline: none;
}
</style>